<template>
  <div>
    <div class="row">
      <h3>VNode提示</h3>
      <yy-button @click="showVNodeInfo">VNode信息</yy-button>
      <yy-button @click="showVNodeSuccess">VNode成功</yy-button>
      <yy-button @click="showVNodeWarning">VNode警告</yy-button>
      <yy-button @click="showVNodeerror">VNode错误</yy-button>
    </div>
    <div class="row">
      <h3>普通消息提示</h3>
      <yy-button @click="showInfoNomal('info')">信息</yy-button>
      <yy-button @click="showInfoNomal('success')">成功</yy-button>
      <yy-button @click="showInfoNomal('warning')">警告</yy-button>
      <yy-button @click="showInfoNomal('error')">错误</yy-button>
    </div>
    <div class="row">
      <h3>带关闭图标</h3>
      <yy-button @click="showInfo">信息</yy-button>
      <yy-button @click="showSuccess">成功</yy-button>
      <yy-button @click="showWarning">警告</yy-button>
      <yy-button @click="showError">错误</yy-button>
    </div>
    <div class="row">
      <h3>其他效果</h3>
      <yy-button @click="showCenter">文字居中</yy-button>
      <yy-button @click="showHTML">使用 HTML 片段</yy-button>
      <yy-button @click="showIconClass">自定义图标</yy-button>
      <yy-button @click="showCustomClass">自定义样式</yy-button>
      <yy-button @click="showOnClose">关闭回调</yy-button>
      <yy-button @click="closeAll">全部关闭</yy-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'message',
  components: {},
  props: {},
  data () {
    return {
      customClass: {
        backgroundColor: '#292a2b',
        color: '#fff',
      }
    }
  },
  methods: {
    showVNodeInfo () {
      const h = this.$createElement;
      this.$message({
        message: h('div', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ]),
      });
      // this.$message.info({
      //   message: h('div', null, [
      //     h('span', null, '内容可以是 '),
      //     h('i', { style: 'color: teal' }, 'VNode')
      //   ])
      // });
    },
    showVNodeSuccess () {
      const h = this.$createElement;
      this.$message({
        message: h('div', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ]),
        type: 'success',
      });
      // this.$message.success({
      //   message: h('div', null, [
      //     h('span', null, '内容可以是 '),
      //     h('i', { style: 'color: teal' }, 'VNode')
      //   ])
      // });
    },
    showVNodeWarning () {
      const h = this.$createElement;
      this.$message({
        message: h('div', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ]),
        type: 'warning'
      });
      // this.$message.warning({
      //   message: h('div', null, [
      //     h('span', null, '内容可以是 '),
      //     h('i', { style: 'color: teal' }, 'VNode')
      //   ])
      // });
    },
    showVNodeerror () {
      const h = this.$createElement;
      this.$message({
        message: h('div', null, [
          h('span', null, '内容可以是 '),
          h('i', { style: 'color: teal' }, 'VNode')
        ]),
        type: 'error'
      });
      // this.$message.error({
      //   message: h('div', null, [
      //     h('span', null, '内容可以是 '),
      //     h('i', { style: 'color: teal' }, 'VNode')
      //   ])
      // });
    },
    showInfo () {
      this.$message({
        message: '(╯▽╰) 这是一条消息呀',
        offset: 350,
        showClose: true,
        duration: 0
      })
    },
    showSuccess () {
      this.$message({
        message: 'ヾ(✿ﾟ▽ﾟ)ノ 这是一条成功的提示呢',
        type: 'success',
        showClose: true,
        duration: 0
      })
    },
    showWarning () {
      this.$message({
        message: '(ಥωಥ) 这是一条警告哦',
        type: 'warning',
        showClose: true,
        duration: 0
      })
    },
    showError () {
      this.$message({
        message: '┭┮﹏┭┮ 这是一条错误提示',
        type: 'error',
        showClose: true,
        duration: 0
      })
    },
    showInfoNomal (type) {
      // 相当于this.$message.error('┭┮﹏┭┮ 这是一条错误提示')
      // this.$message.warning('(ಥωಥ) 这是一条警告哦')
      // this.$message.success('ヾ(✿ﾟ▽ﾟ)ノ 这是一条成功的提示呢')
      // this.$message('这是一条消息提示')
      // this.$message.error('┭┮﹏┭┮ 这是一条错误提示')
      this.$message[type]('普通的消息提示')
    },
    showCenter () {
      this.$message({
        message: '居中的文字',
        center: true
      });
    },
    showHTML () {
      this.$message({
        dangerouslyUseHTMLString: true,
        message: '<strong>这是 <i>HTML</i> 片段</strong>'
      })
    },
    showIconClass () {
      this.$message.success({
        message: '(*^▽^*)自定义图标',
        iconClass: 'icon-star'
      })
    },
    showCustomClass () {
      this.$message({
        message: '自定义的消息弹窗,样式需在data中定义(*^▽^*)',
        customClass: this.customClass
      })
    },
    showOnClose () {
      this.$message({
        message: '消息提示框关闭后控制台打印‘弹窗关闭’',
        onClose (message) {
          console.log('弹窗关闭', message);
        }
      })
    },
    closeAll () {
      this.$message.closeAll()
    }
  },
  created () { },
  mounted () { }
}
</script>
<style lang="less">
.row {
	margin: 20px;
}
</style>